
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css">
  <script type="text/javascript" charset="utf-8" src="../layui/xm-select1.js"></script>
  <script src="../layui/layui.js"></script>
  <link rel="stylesheet" href="../layui-v2.9.8/layui/css/layui.css">
  <script src="../layui-v2.9.8/layui/layui.js"></script>
</head>
<body>

<style>
  .layui-form-label {
    text-align: left; /* 设置文字左对齐 */
  }
</style>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>投诉单修改申请</legend>
</fieldset>

<form class="layui-form" enctype="multipart/form-data" method="post"id="complaintForm">
  <div style="display: none"><input type="text"name="id" id="formid" th:value="${id}"></div>
  <!--    第一行-->
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">客户姓名</label>
      <div class="layui-input-inline">
        <input type="text" name="customerName" lay-verify="required|customerName"  class="layui-input" autocomplete="off" th:value="${customerName}"  lay-affix="clear">
        <!--        <input type="text" name="name" lay-verify="name" autocomplete="off" class="layui-input" th:value="${ProofBargain.name}">-->

      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">电话</label>
      <div class="layui-input-inline">
        <input type="text" name="telephone" lay-verify="required|telephone"  class="layui-input" autocomplete="off" th:value="${telephone}"  lay-affix="clear">
      </div>
    </div>
  </div>
  <!--    第二行-->
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">业务员</label>
      <div class="layui-input-inline">
        <input type="text" name="salespersonname"  lay-verify="required|salespersonname"  class="layui-input" th:value="${salespersonname}" autocomplete="off" lay-affix="clear">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">成交日期</label>
      <div class="layui-input-inline">
        <input type="text" name="completionDate" id="completionDate" lay-verify="required|completionDate" class="layui-input"autocomplete="off" th:value="${completionDate}" lay-affix="clear">
      </div>
    </div>
  </div>
  <!--    第三行-->
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">软件版本</label>
      <div class="layui-input-inline">
        <input type="text" name="softwareVersion" lay-verify="required|softwareVersion"  class="layui-input" autocomplete="off" th:value="${softwareVersion}"   lay-affix="clear">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">办理金额</label>
      <div class="layui-input-inline">
        <input type="text" name="processingAmount" lay-verify="required|processingAmount" class="layui-input" autocomplete="off" th:value="${processingAmount}" lay-affix="clear">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">投诉单位</label>
      <div class="layui-input-inline">
        <input type="text" name="complaintUnit" lay-verify="complaintUnit"  class="layui-input"  autocomplete="off"  th:value="${complaintUnit}" lay-affix="clear">
      </div>
    </div>

    <div class="layui-inline">
      <label class="layui-form-label">审核人</label>
      <div class="layui-input-block">
        <select id="auditingperson" name="auditingPerson" lay-verify="required|auditingPerson">
          <option value=""></option>
          <option th:each="BaseUser : ${lb}"th:value="${BaseUser.username}" th:text="${BaseUser.realName}"></option>
        </select>
      </div>
    </div>
  </div>
  <!--    第四行-->
  <label class="layui-form-label">客服接到客户反馈</label>
  <div class="layui-col-xs5">
    <textarea name="complaintOpinions" class="layui-textarea" lay-verify="complaintOpinions" placeholder="字数小于500" style="width: 72%" autocomplete="off" th:text="${#strings.substringAfter(complaintOpinions, ': ')}"></textarea>
    <input type="file" name="filePath" id="user-photo" lay-verify="file" multiple>
    <div th:if="${complaintOpinionsFiles != null}">
      <div th:each="address : ${#strings.arraySplit(complaintOpinionsFiles, '|')}" style="display:inline-block;">
        <img style="width: 200px; height: 200px; margin-left: 1px; margin-bottom: 1px; display: inline-block;" onclick="imgcli(this)" th:src="'/file/img?imgaddress='+ ${address}">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <div id="imgdiv">

      </div>
    </div>
  </div>


  <div class="layui-form-item" >
    <div class="layui-inline" style="padding-left: 22px;">
      <button class="layui-btn"lay-filter="submitForm" lay-submit id="submit" style="padding-left: 22px; margin-bottom: 20px;">提交修改单</button>
    </div>
  </div>
</form>

<script>
  // var $= layui.$
  //
  // function imgcli(obj) {
  //   if (confirm("确定要删除这张图片吗？")) {
  //     var imgSrc = $(obj).attr('src');
  //     var id = $('#formid').val();
  //     // 通过split方法将路径分割成数组，并选择需要的部分
  //     var pathArray = imgSrc.split('=');
  //     var imagePath = pathArray[pathArray.length - 1];
  //
  //     console.log("Deleted image path: " + imagePath + " ID: " + id);
  //
  //
  //
  //     $('#submit').click(function() {
  //       var data = JSON.stringify({
  //         ImagePath: imagePath,
  //         id: id
  //       });
  //
  //       $.ajax({
  //         type: "POST",
  //         url: "/process/complaintDeletedImagePath",
  //         contentType: "application/json",
  //         data: data,
  //         success: function(response) {
  //           console.log(response);
  //           if (response!=="200"){
  //             alert("操作失败!");
  //           }
  //         }
  //       });
  //     });
  //     $(obj).parent().remove();
  //
  //   }
  // }
</script>

<script>
  function deleteprocess() {
    // 创建表单数据对象
    var formData = new FormData();
    formData.append("id", layui.$("#formid").val());
    // 使用sendBeacon方法发送异步请求
    navigator.sendBeacon("/process/delete", formData);
  }

  var $ = layui.$;
  var deletedImages = []; // 存储被删除的图片路径数组

  function imgcli(obj) {
    if (confirm("确定要删除这张图片吗？")) {
      var imgSrc = $(obj).attr('src');
      var imagePath = imgSrc.split('=')[1]; // 获取图片路径
      console.log("Deleted image path: " + imagePath);

      // 将被删除的图片路径添加到数组中
      deletedImages.push(imagePath);

      // 删除图片元素
      $(obj).parent().remove();
    }
  }



  layui.use(['form', 'util', 'laydate'], function(){
    var form = layui.form;
    var layer = layui.layer;
    var util = layui.util;
    var laydate = layui.laydate;
    var  $=layui.$;
    var keys=[]
    var xm
    // 上传多张图片
    var getUserPhoto = document.getElementById("user-photo");
    getUserPhoto.addEventListener('change', function() {
      var filePath = this.files;
      var imgdiv = document.getElementById("imgdiv");
      var form = document.getElementById("complaintForm"); // 获取表单

      // 清空图片容器
      imgdiv.innerHTML = '';

      for (var i = 0; i < filePath.length; i++) {
        var reader = new FileReader();
        reader.onload = function(e) {
          var image = document.createElement("img");
          image.src = e.target.result;
          image.style.maxWidth = "200px";
          image.style.maxHeight = "200px";
          imgdiv.appendChild(image);

          // 创建隐藏的input标签，用于提交图片数据
          var input = document.createElement("input");
          input.type = "hidden";
          input.name = "filePath[]"; // 注意这里将name属性设置为数组形式
          input.value = e.target.result;
          form.appendChild(input); // 将input元素追加到表单中
        };
        reader.readAsDataURL(filePath[i]);
      }
      console.log("图片", filePath)
    });

    //日期
    laydate.render({
      elem: '#completionDate',
      format: 'yyyy-MM-dd', // 设定日期显示格式
      type: 'date'
    });

    $.ajax({
      url: "/user/queryforselect",
      type: "post",
      async: true,
      success: function (data) {
        if(data.data){
          for (var i = 0; i < data.data.length; i++) {
            var temp = {
              "name": data.data[i].realName,
              "value": data.data[i].username  //value为唯一标识，此处为id
            }
            keys.push(temp)
          }
          xm=xmSelect.render({
            el: '#copyPersonSelect',
            direction: 'up',
            filterable: true,
            data: keys
          })
        }
      },
    });
    //自定义验证规则
    form.verify({
      customerName: function(value){
        if(value.length < 1){
          return '必填';
        }
      },
      auditingPerson: function(value){
        if(value.length < 1){
          return '必填';
        }
      },
      telephone: function(value){
        if(value.length < 1){
          return '必填';
        }
        if (!/^1[3456789]\d{9}$/.test(value)){
          return  "请输入正确电话号码"}
      },
      completionDate: function(value){
        if(value.length < 1){
          return '必填';
        }
      },
      softwareVersion: function(value){
        if(value.length < 1){
          return '必填';
        }
      },
      salespersonname: function(value){
        if(value.length < 1){
          return '必填';
        }
      },
      processingAmount: function(value){
        if(value.length < 1){
          return '必填';
        }
      }

    });

    // 修改为ajax提交
    // 确保代码在文档加载完成后执行
    $(document).ready(function() {
      // 绑定表单提交事件
      $('#complaintForm').on('submit', function(event) {
        // 阻止默认的表单提交行为
        event.preventDefault();

        // 构建表单数据
        var formData = new FormData(this);

        // 在发送请求之前，将图片路径添加到表单数据中
        formData.append('imagePath', deletedImages);

        // 发送 AJAX 请求
        $.ajax({
          url: '/process/complaintUpdate', // 提交的地址
          type: 'POST', // 提交方式
          data: formData, // 表单数据
          processData: false, // 不处理数据
          contentType: false, // 不设置内容类型
          beforeSend: function(xhr) {
            // 在发送请求之前可以做一些额外的处理
          },
          success: function(response) {
            // 请求成功的回调函数
            layer.msg("创建成功");
            var sindex = layer.load(2, {shade: [0.5,'#000']});
            layer.close(sindex);
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index);
            parent.location.reload();
          },
          error: function(xhr, status, error) {
            // 请求失败的回调函数
            console.error(error);
            layer.msg("提交失败", error);
          }
        });

        return false; // 阻止表单默认提交
      });
    });



  });
</script>

</body>
</html>